<template>
    <div class='tmp'>
        <div class="twarp">
            <h2 v-text="imginfo.title"></h2>
            <span class="desc">
				{{imginfo.add_time  | moments}}
				{{imginfo.click}}次浏览
				 分类:民生
			</span>
        </div>
        <div class="mui-content">
            <ul class="mui-table-view mui-grid-view mui-grid-9">
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"
                    v-for='(item,index) in smallpiclist' @click="$preview.open(index, smallpiclist)">
                    <router-link to="">
                        <img class="preview-img"  :src="item.src" alt="" >
                    </router-link>
                </li>
            </ul>
        </div>
        <div class="content" v-html="imginfo.content"></div>
        <!--评论组件-->
        <comment :artid='imgid'></comment>
    </div>
</template>
<script>
    import comment from '../comment/comment.vue';
    import common from '../field/getfield.js';
    export default{
        components:{
            comment:comment
        },
        data(){
            return {
                smallpiclist:[],
                imginfo:[],
                imgid:0
            }
        },
        methods:{
            //获取图片缩略图
            getsmallpic(){
                let url = common.apidomain+'/api/getthumimages/'+this.imgid;
                this.$http.get(url).then(res=>{
                    res.body.message.forEach(item=>{
                        item.src='http://ofv795nmp.bkt.clouddn.com/'+item.src;
                        item.w=600;
                        item.h=400;
                    })
                    this.smallpiclist=res.body.message;
                    console.log(this.smallpiclist)
                })
            },
            //获取图片详细内容；
            getimginfo(){
                let url = common.apidomain+'/api/getimageInfo/'+this.imgid;
                this.$http.get(url).then(res=>{
                    this.imginfo=res.body.message[0];
                    console.log(this.imginfo)
                })
            }
        },
        created(){
            this.imgid = this.$route.params.imgid;
            this.getsmallpic();
            this.getimginfo();
        }
    }
</script>
<style scoped>
    .tmp .mui-grid-view.mui-grid-9 .mui-table-view-cell a img{
        width:100%;
    }
    .mui-grid-view.mui-grid-9{
        background: white;
    }
    .twarp h2{
        font-size: 16px;
    }
</style>